<template>
  <table ref="compa">
    <thead>
      <td v-for="item in arr" :key="item.id">{{ item }}</td>
    </thead>
    <tr v-for="(item, index) in newArr" :key="index">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.time }}</td>
      <td>
        <button v-on:click="remov(index)">{{ item.btn }}</button>
      </td>
    </tr>
    <div v-show="!arr2.length">没有更多数据了</div>
  </table>
</template>
<style scoped>
.in-one {
  margin-left: 5px;
}

table thead td {
  background-color: #0000ff;
  color: white;
  border: 1px solid black;
  font-weight: bolder;
}

table {
  width: 800px;
  margin-top: 20px;
  border-collapse: collapse;
}
td {
  height: 50px;
  border: 1px solid black;
  text-align: center;
  border-collapse: collapse;
  /* border-top:none; */
}
</style>

<script>
export default {
  data() {
    return {
      bor: {
        border: "1px solid black",
        display: "flex",
      },
      key: "",//取searchtext的值
      spanHtml: '编号:<input class="in-one" type="text">',
      spanHtmltwo: '品牌名称:<input class="in-one" type="text">',
      spanHtmlthree:
        '品牌名称:<input class="in-one" type="text" placeholder="请输入搜索条件">',
      classA: "dv1",
      mar: {
        margin: "10px",
        display: "block",
      },
      btn: {
        height: "30px",
        width: "50px",
        margin: "auto",
      },
      msg: "第一个组件",
      //加了localstorage之后这些数组就可以删掉了,因为所有的数据已经被本地存储了
      arr2: [
        {
          id: 1,
          name: "瑶",
          time: new Date().toLocaleTimeString(),
          btn: "删除",
        },
        {
          id: 2,
          name: "曹强",
          time: new Date().toLocaleTimeString(),
          btn: "删除",
        },
        {
          id: 3,
          name: "赵翔",
          time: new Date().toLocaleTimeString(),
          btn: "删除",
        },
      ],
      // arr2: JSON.parse(localStorage.getItem("arr2")), //取到保存的数据渲染到页面上
      arr: ["编号", "品牌名称", "创立时间", "操作"],
    };
  },
  methods: {
    remov: function (index) {
      console.log(index);
      console.log(this.arr2);
      // console.log(this.arr2[0].id);
      this.arr2.splice(index, 1);
      localStorage.setItem("arr2", JSON.stringify(this.arr2)); //存储在本地,引号里面的是数据存储的那个本地数据库的名字
    },
    // searchback(param){
    //   console.log(param);
    //     this.key = param;
    // }
  },
  mounted() {
    this.$bus.$on("add-todo", (input, inputtwo) => {
      console.log(input);
      console.log(inputtwo);
      //   console.log(this.arr2[0].id);
      let obj = {
        id: input,
        name: inputtwo,
        time: new Date().toLocaleTimeString(),
        btn: "删除",
      };
      this.arr2.push(obj);
      localStorage.setItem("arr2", JSON.stringify(this.arr2));
    });
    this.$bus.$on("searchback", input => {
      console.log(input);
      this.key = input;//将传过来的值赋给key，方便下面的函数调用
      console.log(this.key);
      console.log(this.arr2);
      console.log(this);
    });
    // 让本地数据库被删除之后不会报错
    //把数据从localstorage里面取下来
    let arrrr = localStorage.getItem('arr2') || "[]";
    // 取下来的是一个字符串，需要转换成数组
    this.arr2 = JSON.parse(arrrr)
    console.log(this.arr2);
  },
  computed: {
    newArr() {
      //filter后面传的是个函数,这个函数用来判断是否有相同的字符,item是后面那个函数里面的参数,指的 就是arr2里面的每一项
      return this.arr2.filter(item =>{ return item.name.indexOf(this.key) !== -1});
      //下面这个写法不可以,因为普通函数里面的this指向window,不指向当前实例,这样就取不到key的值了,所以就用上面的箭头函数写法了
      // this.arr2.filter(function (item) {
        // return item.name.indexOf(this.key) !== -1
      // });
    },
  },
};
</script>
